"use client";
import { selectRoleOptions } from "@common/api/role_action";
import { Edit, useForm, useSelect } from "@refinedev/antd";
import { useParsed } from "@refinedev/core";
import { Form, Input, Row, Col, Select, Alert } from "antd";
import { useEffect, useState } from "react";

export default function UserEdit() {
    const { id } = useParsed();
    console.log('id:', id);
    const { formProps, saveButtonProps, queryResult } = useForm({});
    const [roles,setRoles] = useState ([]);
    const isProtected = Number(id) === 1;
    
    useEffect(()=>{
        selectRoleOptions().then((res:any)=>{
            setRoles(res.data);
        })
    },[])
    
    return (
        <Edit saveButtonProps={isProtected ? { ...saveButtonProps, disabled: true } : saveButtonProps}>
            {isProtected && (
                <Alert
                    message="系统管理员保护"
                    description="ID为1的系统管理员用户不可修改，这是系统保护机制。"
                    type="warning"
                    showIcon
                    style={{ marginBottom: 16 }}
                />
            )}
            <Form {...formProps} layout="horizontal" labelCol={{ span: 2 }}>
                <Form.Item name={["user_name"]} label="用户名" rules={[{ required: true }]}>
                    <Input disabled={isProtected} />
                </Form.Item>
                <Form.Item name={["nick_name"]} label="昵称" rules={[{ required: true }]}>
                    <Input disabled={isProtected} />
                </Form.Item>
                <Form.Item name={["email"]} label="邮箱">
                    <Input disabled={isProtected} />
                </Form.Item>
                <Form.Item name={["phonenumber"]} label="手机号">
                    <Input disabled={isProtected} />
                </Form.Item>
                <Row>
                    <Col span={12}>
                        <Form.Item name={["sex"]} label="性别">
                            <Select 
                                disabled={isProtected}
                                options={[
                                    { label: '男', value: '0' },
                                    { label: '女', value: '1' },
                                    { label: '未知', value: '2' },
                                ]} 
                            />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item name={["status"]} label="状态">
                            <Select 
                                disabled={isProtected}
                                options={[
                                    { label: '正常', value: '0' },
                                    { label: '停用', value: '1' },
                                ]} 
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <Form.Item name={["role_ids"]} label="分配角色">
                    <Select 
                        disabled={isProtected}
                        mode="multiple" 
                        options={roles} 
                        placeholder="请选择角色" 
                    />
                </Form.Item>
                <Form.Item name={["remark"]} label="备注">
                    <Input.TextArea rows={2} disabled={isProtected} />
                </Form.Item>
            </Form>
        </Edit>
    );
} 